@extends('base')

@section('content')
<form class="layui-form" name="edit_form" lay-filter="edit_form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{{ $data['article_title'] }}" lay-verify="required" placeholder="请输入文章标题" class="layui-input">
                    <input type="hidden" name="id" value="{{ $data['id'] }}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属分类：</label>
                <div class="layui-input-inline">
                    <select name="cid" lay-verify="required">
                        <option value="">--输入关键词筛选--</option> @foreach($category as $vo)
                        <option value="{{ $vo['id'] }}" @if($data['cate_id'] == $vo['id']) selected @endif>{{ $vo['cate_name'] }}</option> @endforeach
                    </select>
                </div>
                <label class="layui-form-label">是否推荐：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="checkbox" name="recom" title="推荐" lay-skin="primary" value="1" @if($data['is_recom'] == 1) checked @endif>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">相关标签：</label>
                <div class="layui-input-block"> @foreach($tags as $vo)
                    <input type="checkbox" name="tags" value="{{ $vo['id'] }}" title="{{ $vo['tag_name'] }}" @if(in_array($vo['id'], $data['article_tags'])) checked @endif lay-filter="tags-checkbox-filter"> @endforeach
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">缩 略 图：</label>
                <div class="layui-input-inline" style="width: 500px;">
                    <input type="text" name="img" value="{{ $data['article_img'] }}" id="article-img" placeholder="图片尺寸：355 x 254" class="layui-input" style="width: 500px">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn pear-btn-primary" id="upload-btn"> <i class="layui-icon">&#xe67c;</i> 上传图片 </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">阅读次数：</label>
                <div class="layui-input-inline">
                    <input type="number" name="read" placeholder="请输入阅读次数" lay-verify="required|number" value="{{ $data['read_num'] }}" class="layui-input">
                </div>
                <label class="layui-form-label">是否显示：</label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="1" title="显示" @if($data['article_status'] == 1) checked @endif>
                    <input type="radio" name="status" value="2" title="隐藏" @if($data['article_status'] == 2) checked @endif>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章内容：</label>
                <div class="layui-input-block">
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                        <textarea id="article-content" name="content" style="display: none;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="article-save"><i class="layui-icon layui-icon-ok"></i>提交</button>
            <button type="reset" class="pear-btn pear-btn-sm"><i class="layui-icon layui-icon-refresh"></i>重置</button>
        </div>
    </div>
</form>
@endsection

@section('js')
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"/>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container {
        border-bottom: 1px solid #ccc;
    }
    #editor-container {
        height: 500px;
    }
</style>
<script>
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: '请输入文章详细内容...',
        MENU_CONF:{},
        onChange(editor) {
            document.getElementById('article-content').value = editor.getHtml()
        },
    }

    // 图片上传设置
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/upload/image',
        fieldName: 'upload_name',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    }

    // 视频上传设置
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/upload/video',
        fieldName: 'upload_name',
        maxFileSize: 200 * 1024 * 1024, // 单个文件的最大体积限制，默认为 10M, 改为 200M
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '{!!  $data['content']['article_content'] !!}',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
</script>
<script>
    layui.use(['form', 'jquery','upload'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let upload = layui.upload;

        upload.render({
            elem: '#upload-btn' //绑定元素
            ,url: "/upload/upload" //上传接口
            ,accept: 'image'
            ,acceptMime: 'image/*'
            ,field: 'upload_name'
            ,size: 2048
            ,data: {upload_type: 'image'}
            ,headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            ,done: function(res){
                if (res.errno === 0){
                    $('#article-img').val(res.data.url)
                }else {
                    layer.msg(res.message, {icon: 2, time: 1000})
                }
            }
            ,error: function(){
                layer.msg('网络异常！', {icon: 2, time: 1000})
            }
        });

        let tags = []
        $('input[name=tags]:checked').each(function() {
            tags.push($(this).val());
        });
        form.on('checkbox(tags-checkbox-filter)', function(data){
            let elem = data.elem; // 获得 checkbox 原始 DOM 对象
            let checked = elem.checked; // 获得 checkbox 选中状态
            let value = elem.value; // 获得 checkbox 值
            if (checked === true) {
                if (!tags.includes(value)) {
                    tags.push(value)
                }
            }else{
                if (tags.includes(value)) {
                    let index = tags.indexOf(value);
                    tags.splice(index,1)
                }
            }
        });

        form.on('submit(article-save)', function(data) {
            data.field.tags = tags
            $.ajax({
                url: "/article/edit",
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(result) {
                    if (result.status) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("article-table");
                        });
                    } else {layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>
@endsection
